<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head>
	<title>圣诞节快乐</title>
	<style>
		body,
		html {
			overflow: hidden;
			margin: 0;
			height: 100%;
			font-family: 'Lato';
			font-weight: 700;
			font-size: 30px;
			text-transform: uppercase;
			color: black;

		}

		.color {
			width: 100vw;
			height: 100vh;
			background-color: black;
		}
		.frame {
			display: inline-block;
			padding: 0;
			border-radius: 3px;
			font-size: 7em;
			text-shadow: 1px 2px white;
			color: green;
			text-align: center;
		}

		.frame canvas {
			display: block;
			padding: 60px 0px 0px 0px;
			background-color: black;
		}

		#tree {
			display: block;
			position: absolute;
			background-color: transparent;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<div class="color" id="bg">
		<canvas id="c1"></canvas>
	</div>
	<div class='frame'>
		<canvas id='tree'></canvas>
	</div>
	  <script>
		  document.getElementById("a1").play;
	  </script>
	<script>
		var center = new Point(680, 80);
		var points = 5;
		var radius1 = 18;
		var radius2 = 25;

		var randColor = ['#F2385A', '#F5A503', '#E9F1DF', '#4AD9D9', '#36B1BF', '#274C00', '#7F9400', '#D4D34D', '#EDFFA9', '#DB4646'];
		var randText = ['☆', 'love', 'sj', 'rx', '♥', '◇', '520', '★',];

		function getRandomNum(first, last) {
			return Math.floor(Math.random() * (last - first + 1) + first);
		}
		function charater(pos) {
			var instance = new PointText(pos);
			instance.fontSize = 20;
			instance.content = randText[getRandomNum(0, 7)];
			instance.fillColor = randColor[getRandomNum(0, 9)];
			instance.rotate(Math.random() * 360);
			instance.scale(0.5 + Math.random() * 0.5);
			instance.dest = new Point(getRandomNum(550, 810), 730);
			return instance;
		}
		function rotateMove(self, angle) {
			if (self.position.y < 450) {
				var vector = self.dest - self.position;
				self.position.y += self.bounds.width / 10;
				self.position.x += vector.x / 50;
				self.rotate(angle);
				self.fillColor.hue += 3;
				//self.fillColor.alpha -=0.006;
			} else {
				self.remove();
			}
		}
		var group = new Group();
		var gapTime = 30;
		init(30);
		function init(nameCount) {
			for (var i = 0; i < nameCount; i++) {
				var ralmond = new charater(new Point(665, 100));
				group.addChild(ralmond);
			}
		}
		function onFrame(event) {
			for (var i = 0; i < group.children.length; i++) {
				rotateMove(group.children[i], 5);
			}
			gapTime--;
			if (gapTime < 0) {
				init(5);
				gapTime = 10;
			}


			star.rotate(3);
			star.fillColor.hue += 3
		}
		var star = new Path.Star(center, points, radius1, radius2);
		star.fillColor = 'yellow';    
	</script>
	<script>
		(function () {
			var COUNT = 300;
			var masthead = document.getElementById('bg');
			var canvas = document.getElementById('c1');
			var ctx = canvas.getContext('2d');
			var width = masthead.clientWidth;
			var height = masthead.clientHeight;
			var i = 0;
			var active = false;

			function onResize() {
				width = masthead.clientWidth;
				height = masthead.clientHeight;
				canvas.width = width;
				canvas.height = height;
				ctx.fillStyle = '#FFF';

				var wasActive = active;
				active = width > 600;

				if (!wasActive && active)
					requestAnimFrame(update);
			}

			var Snowflake = function () {
				this.x = 0;
				this.y = 0;
				this.vy = 0;
				this.vx = 0;
				this.r = 0;

				this.reset();
			}

			Snowflake.prototype.reset = function () {
				this.x = Math.random() * width;
				this.y = Math.random() * -height;
				this.vy = 1 + Math.random() * 3;
				this.vx = 0.5 - Math.random();
				this.r = 1 + Math.random() * 2;
				this.o = 0.5 + Math.random() * 0.5;
			}

			canvas.style.position = 'absolute';
			canvas.style.left = canvas.style.top = '0';

			var snowflakes = [], snowflake;
			for (i = 0; i < COUNT; i++) {
				snowflake = new Snowflake();
				snowflake.reset();
				snowflakes.push(snowflake);
			}

			function update() {

				ctx.clearRect(0, 0, width, height);

				if (!active)
					return;

				for (i = 0; i < COUNT; i++) {
					snowflake = snowflakes[i];
					snowflake.y += snowflake.vy;
					snowflake.x += snowflake.vx;

					ctx.globalAlpha = snowflake.o;
					ctx.beginPath();
					ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
					ctx.closePath();
					ctx.fill();

					if (snowflake.y > height) {
						snowflake.reset();
					}
				}

				requestAnimFrame(update);
			}

			// shim layer with setTimeout fallback
			window.requestAnimFrame = (function () {
				return window.requestAnimationFrame ||
					window.webkitRequestAnimationFrame ||
					window.mozRequestAnimationFrame ||
					function (callback) {
						window.setTimeout(callback, 1000 / 60);
					};
			})();
			onResize();
			window.addEventListener('resize', onResize, false);
		})();
	</script>
	<script>
		(function () {
			var SwirlNode, Tree, TreeSwirl, height, swirls, width,
				__bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };

			width = 600;
			height = 450;

			swirls = [
				{
					color: 'gold',
					nodes: 300,
					speed: -1,
					radius: 3
				}, {
					color: 'green',
					nodes: 200,
					speed: 1,
					radius: 1.5
				}, {
					color: 'blue',
					nodes: 80,
					speed: -3,
					radius: 6
				}, {
					color: 'green',
					nodes: 250,
					speed: 3,
					radius: 3
				}
			];

			Tree = (function () {
				function Tree(w, h, swirls) {
					this.run = __bind(this.run, this);
					var i;
					this.width = w;
					this.height = h;
					this.canvas = document.getElementById('tree');
					this.context = this.canvas.getContext('2d');
					this.canvas.width = w;
					this.canvas.height = h;
					this.swirls = (function () {
						var _i, _ref, _results;
						_results = [];
						for (i = _i = 0, _ref = swirls.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
							_results.push(new TreeSwirl(this, swirls[i], i / swirls.length));
						}
						return _results;
					}).call(this);
					this.run();
				}

				Tree.prototype.run = function (t) {
					if (t == null) {
						t = 0;
					}
					window.requestAnimationFrame(this.run);
					return this.draw(t);
				};

				Tree.prototype.draw = function (t) {
					var s, _i, _j, _len, _len1, _ref, _ref1, _results;
					this.context.clearRect(0, 0, this.width, this.height);
					_ref = this.swirls;
					for (_i = 0, _len = _ref.length; _i < _len; _i++) {
						s = _ref[_i];
						s.drawBack(t);
					}
					_ref1 = this.swirls;
					_results = [];
					for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
						s = _ref1[_j];
						_results.push(s.drawFront(t));
					}
					return _results;
				};

				return Tree;

			})();

			TreeSwirl = (function () {
				function TreeSwirl(tree, s, offset) {
					var i;
					this.tree = tree;
					this.offset = offset;
					this.color = s.color;
					this.speed = s.speed;
					this.radius = s.radius;
					this.nodes = (function () {
						var _i, _ref, _results;
						_results = [];
						for (i = _i = 0, _ref = s.nodes; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
							_results.push(new SwirlNode(this, i / s.nodes));
						}
						return _results;
					}).call(this);
				}

				TreeSwirl.prototype.drawBack = function (t) {
					var n, _i, _len, _ref, _results;
					_ref = this.nodes;
					_results = [];
					for (_i = 0, _len = _ref.length; _i < _len; _i++) {
						n = _ref[_i];
						if (n.inBack(t)) {
							_results.push(n.draw(t));
						}
					}
					return _results;
				};

				TreeSwirl.prototype.drawFront = function (t) {
					var n, _i, _len, _ref, _results;
					_ref = this.nodes;
					_results = [];
					for (_i = 0, _len = _ref.length; _i < _len; _i++) {
						n = _ref[_i];
						if (n.inFront(t)) {
							_results.push(n.draw(t));
						}
					}
					return _results;
				};

				return TreeSwirl;

			})();

			SwirlNode = (function () {
				function SwirlNode(swirl, offset) {
					this.swirl = swirl;
					this.offset = offset;
				}

				SwirlNode.prototype.yPos = function () {
					var d, od;
					d = this.t / 800 * this.swirl.speed;
					od = d + this.offset * this.swirl.tree.height;
					return (this.swirl.tree.height - od % this.swirl.tree.height) % this.swirl.tree.height;
				};

				SwirlNode.prototype.xDeg = function () {
					return this.yPos() * 5 + 100 * this.swirl.offset;
				};

				SwirlNode.prototype.xRad = function () {
					return this.xDeg() * Math.PI / 60;
				};

				SwirlNode.prototype.xPos = function () {
					return Math.sin(this.xRad()) * this.swirl.tree.width * this.yPos() / this.swirl.tree.height / 3 + this.swirl.tree.width / 2;
				};

				SwirlNode.prototype.shade = function () {
					return (Math.cos(this.xRad()) + 1) / 2;
				};

				SwirlNode.prototype.inBack = function (t) {
					this.t = t;
					return Math.cos(this.xRad()) > 0;
				};

				SwirlNode.prototype.inFront = function (t) {
					this.t = t;
					return !this.inBack(t);
				};

				SwirlNode.prototype.draw = function (t) {
					this.t = t - 600;
					this.drawNode(this.swirl.radius * 0.6, this.shade() + 0.9);
					this.t = t - 180;
					this.drawNode(this.swirl.radius * 0.8, this.shade() + 0.4);
					this.t = t;
					return this.drawNode(this.swirl.radius, this.shade());
				};

				SwirlNode.prototype.drawNode = function (size, shade) {
					var c;
					c = this.swirl.tree.context;
					c.beginPath();
					c.arc(this.xPos(), this.yPos(), size, 0, 2 * Math.PI);
					c.fillStyle = this.swirl.color;
					c.fill();
					c.fillStyle = "rgba(0,0,0," + shade + ")";
					return c.fill();
				};

				return SwirlNode;

			})();

			new Tree(width, height, swirls);

		}).call(this);</script>
</body>

</html>